<template>
	<view style="padding-bottom: 80rpx;">
		<!-- <u-navbar :is-back="false" title="课程学习" :border-bottom="false" /> -->
		<view class="top-box">
			<!-- 搜索 -->
			<view class="top-search">
				<tui-search @searchEmit="searchEmitHandler" style="flex:1"></tui-search>
				<image @click="jumpTo('my')" src="../../static/curriculum/learn@2x.png" style="width: 50rpx;" mode="widthFix"></image>
				<image @click="jumpTo('all')" class="u-m-l-15 u-m-r-30" src="../../static/curriculum/all@2x.png" style="width: 50rpx;" mode="widthFix"></image>
			</view>
			<!-- 分类 color: #F53939;-->
			<scroll-view class="" :scroll-x="true" :enable-flex="true" :scroll-left="100" style="border-bottom: 1px solid #E8E8E8;">
				<view class="u-flex u-flex-nowrap" style="padding: 0 25rpx;min-width: 1000rpx;">
					<view class="u-m-r-35" v-for="(item,idx) in typeList" :key="idx" @click="clickType1(item)">
						<view class="text u-line-1" 
						style="height: 80rpx;line-height: 80rpx;font-size: 28rpx;max-width: 200rpx;" 
						:style="{color:activeType == item.value?'#EA655E':''}">{{item.label}}</view>
						<view class="line" style="width: 65%;height: 6rpx;margin: 0 auto;" :style="{background:activeType == item.value?'#EA655E':''}"></view>
					</view>
				</view>
			</scroll-view>
			<view class="u-p-20" v-show="['1','2','3'].includes(activeType) == false">
				<scroll-view :scroll-x="true" :enable-flex="true">
					<view class="u-flex u-flex-nowrap">
						<view class="u-text-center u-m-r-35" v-for="(item,idx) in secondList" :key="idx" @click="itemSecondType(item)">
							<view class="text u-line-1" 
							style="padding: 10rpx 25rpx;border-radius: 30rpx;font-size: 25rpx;color: #fff;max-width: 210rpx;"
							:style="secondType == item.value ?{background:'linear-gradient(-67.1263348093733deg, rgba(229, 107, 97, 1) 0%, rgba(255, 220, 220, 1) 100%)',color:'#fff'}:{color:'#303133'}"
							>{{item.label}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 列表 -->
		<tui-course v-for="(item, index) in lessonList" :key="index" :item="item"></tui-course>
		<tabs active="2"/>
	</view>
</template>

<script>
	import tuiSearch from '../../components/tui-search/tui-search.vue';
	import tuiCourse from '../../components/tui-course/tui-source.vue';
	import tabs from '../../components/tabs/tabs.vue'
	export default {
		components: {
			tuiSearch,
			tuiCourse,
			tabs
		},
		data() {
			return {
				activeType:'1',
				secondType:'0',
				typeList:[{label:'最新',value:'1'},{label:'热门',value:'2'},{label:'精品',value:'3'}],
				yunUrl: 'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				lessonList:[],
				secondList:[]
			}
		},
		onLoad() {
			this.initDataList()
			this.getAllTypeList()
			this.getLessonListByCondition()
		},
		methods: {
			clickType1(data){
				console.log(data)
				this.activeType = data.value
				this.secondType='0'
				this.secondList=[]
				if(!['1','2','3'].includes(this.activeType)){
					this.secondList= JSON.parse(JSON.stringify(data.children));
					this.secondList.unshift({label:'全部',value:'0'})
				}
				
				this.getLessonListByCondition()
			},
			itemSecondType(item,idx){
				this.secondType = item.value
				
				this.getLessonListByCondition()
			},
			getAllTypeList(){
				this.$http.getClassifyInfoList().then(res=>{
					console.log(res)
					let arr  = res.data.reduce((ls,item)=>{
						let obj= Object.assign({});
						obj.label =item.name
						obj.value= item.specialId
						obj.children = []
						if(item.children){
							obj.children=item.children.map(item2=>{
								item2.label =item2.name
								item2.value= item2.specialId
								return item2
							})
						}
						ls.push(obj)
						return ls
					},[]);
					console.log(arr)
					
					this.typeList = this.typeList.concat(arr)
				})
			},
			//获取课程列表
			getLessonListByCondition() {
				let obj = Object.assign({});
				obj.lessonName = this.keyword
				if(['1','2','3'].includes(this.activeType)){
					obj.lessonStatus = this.activeType
				}else{
					obj.lessonStatus=''
				}
				if(!['1','2','3'].includes(this.activeType)){
					if(this.secondType != 0){
						obj.specialId= this.secondType
					}else{
						obj.specialId= this.activeType
					}
				}
				this.$http.getLessonListByCondition(obj).then(res => {
					console.log(res)
					this.lessonList = res.data.map(item => {
						item.imgUrl = this.yunUrl + item.picture
						return item
					});
				})
			},
			initDataList(){
				console.log('加载课程');
			},
			searchEmitHandler(data){
				uni.navigateTo({
					url:'../search/search?search='+data
				})
			},
			jumpTo(type) {
				let url = '../course/my/my';
				if(type == 'all') {
					url = '../course/all/all';
				}
				let that = this;
				uni.navigateTo({
					url:url,
					events:{
						getNextPageData: function(res) {
						  that.activeType= res.type1
						  that.secondType = res.type2
						  if(that.typeList.length>0){
							   that.secondList=[]
							  that.typeList.forEach((item)=>{
								  if(item.value == that.activeType){
									  that.secondList = item.children
									  that.secondList.unshift({label:'全部',value:'0'})
								  }
							  })
						  }
						  that.getLessonListByCondition()
						},
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.top-box {
		background: #FFFFFF;
		position: sticky;
		/* top: calc(44px + var(--status-bar-height)); */
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.top-search{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>
